<template>
  <Modal v-model="modal" :title="title">
    <div class="tag-modal">
      <Form :model="form" :label-width="120" ref="form" :rules="rules">
        <FormItem label="规则名称" prop="policyName">
          <Input :maxlength="15" v-model.trim="form.policyName" placeholder="请输入规则名"/>
        </FormItem>
        <FormItem label="入库有效天数" prop="effectiveDays">
          <InputNumber :max="999" :min="0"  style="width:370px"  v-model.trim="form.effectiveDays" placeholder="必填项"></InputNumber>
        </FormItem>
        <FormItem label="扫码定位距离(米)" prop="distance">
          <InputNumber :max="999999" style="width:370px" :min="0" v-model.trim="form.distance" placeholder="必填项"></InputNumber>
        </FormItem>
        <FormItem label="省市">
          <AreaSelectCity @input="onChangeArea" v-model="value" :isChangeOnSelect="true" :isDisabled="form.isSystem"></AreaSelectCity>
        </FormItem>
         <FormItem :label-width='20'> 
              <div class="common-class">
                <i class="ivu-icon ivu-icon-ios-alert"></i>
                <span> 提示：1、如门店扫码地址在此规则设置的省市内，则受此规则约束 2、如多个政策有重叠的设置参数，以范围最小的那个政策为准</span>
                </div>
          </FormItem>
      </Form>
    </div>
    <div slot="footer">
      <Button @click="modal = false" size="large" type="text">取消</Button>
      <Button :disabled="btnDisabled" @click="onSave" type="primary" size="large">确定</Button>
    </div>
  </Modal>
</template>
<script>
import table from '@/table'
import AreaSelectCity from '@/components/AreaSelectCity'
// import { clearEmpty } from '@/util'
export default {
  components: {
    AreaSelectCity
  },
  computed: {
    value: {
      get() {
        const { provinceId='', cityId='' } = this.form
        let val = []
        if(provinceId) {
          val = [provinceId, cityId]
        }
        return val
      },
      set(newval) {
        const [ provinceId, cityId ] = newval
        this.form = Object.assign(this.form, {provinceId, cityId})
      }
    }
  },
  data() {
    return {
      id: null,
      modal: false,
      title: '扫码政策设置',
      btnDisabled: false,
      rules: {
        policyName: [{ required: true, message: '规则名不能为空', trigger: 'blur' }],
        effectiveDays: [{ required: true, message: '入库有效天数不能为空', type: 'number', trigger: 'change' }],
        distance: [{ required: true, message: '扫码定位距离不能为空', type: 'number', trigger: 'change' }]
      },
      form: {
        policyName: '',
        effectiveDays: '',
        distance: '',
        provinceId: '',
        provinceName: '',
        cityId: '',
        cityName: '',
        isSystem: null
      },
      flag: false
    }
  },
  methods: {
    resetForm() {
      this.$refs.form.resetFields()
      this.form = {
        policyName: '',
        effectiveDays: '',
        distance: '',
        provinceId: '',
        provinceName: '',
        cityId: '',
        cityName: '',
        isSystem: null
      }
      this.flag = false
      this.btnDisabled = false
      this.title = '新增扫码政策设置'
    },
    updateForm(id) {
      this.resetForm()
      this.id = null
      if (id) {
        this.getInfo(id)
        this.title = '编辑扫码政策设置'
        this.openModal()
      } else {
        this.openModal()
      }
    },
    openModal() {
      this.modal = true
    },
    closeModal() {
      this.modal = false
    },
    getInfo(id) {
      this.id = id
      this.$ajaxGet(`/setting/scancode_policy/detail/${id}`).then(data => {
        this.form = {
          policyName: data.policyName,
          effectiveDays: data.effectiveDays,
          distance: data.distance,
          provinceId: data.provinceId,
          provinceName: data.provinceName,
          cityId: data.cityId,
          cityName: data.cityName,
          isSystem: data.isSystem
        }
        this.openModal()
      })
    },
    onChangeArea(val, or) {
      let [province={}, city={}, area={}] = or; // 省 市 区
      this.form.provinceId = province.id
      this.form.provinceName = province.name
      this.form.cityId = city.id
      this.form.cityName = city.name
    },
    onSave() {
      if (this.btnDisabled) return
      this.btnDisabled = true
      this.$refs["form"].validate(valid => {
        if (valid) {
          let text = this.id ? '编辑' : '新增'
          let url = this.id ? '/setting/scancode_policy/modify' : '/setting/scancode_policy/save'
          let param = {
            policyName: this.form.policyName,
            effectiveDays: parseInt(this.form.effectiveDays),
            distance: parseInt(this.form.distance),
            provinceId: parseInt(this.form.provinceId),
            provinceName: this.form.provinceName,
            cityId: parseInt(this.form.cityId),
            cityName: this.form.cityName
          }
          if (this.id) param.id = this.id
          // param = clearEmpty(param)
          // if (this.provinceId) param.provinceId = parseInt(this.form.provinceId)
          // if (this.provinceName) param.provinceName = this.form.provinceName
          // if (this.cityId) param.cityId = parseInt(this.form.cityId)
          // if (this.cityName) param.cityName = this.form.cityName
          this.$jsonPost(url, param).then(data => {
            this.$Notice.success({
              title: `${text}成功`
            })
            this.$emit('complete')
            this.closeModal()
          }).catch(() => {
            this.btnDisabled = false
          })
        } else {
          this.btnDisabled = false
        }
      })
    }
  }
}
</script>